import React, {useEffect, useRef, useState} from 'react'
import axios from 'axios'
import {KiteCaptcha, KiteConfigProvider} from './index'
import './App.css'

// const genUrl = 'http://localhost:8088/captcha/behavior/gen'
const checkUrl = 'http://localhost:8088/captcha/behavior/check'
const App: React.FC = () => {
  // 方法转换
  const mockData = async () => {
    try {
      const module = await import(`./mock/${type.toLowerCase()}_render_data.json`)
      return module.default.captcha
    } catch (error) {
      console.error('Failed to load mock data:', error)
      return {}
    }
  }
  const renderDataApiRequest = async () => {
    return mockData()
    // const res = await axios.get(`${genUrl}?type=${type}`)
    // return res.data.captcha
  }
  const [type, setType] = useState('SLIDER')
  const [renderDataApi, setRenderDataApi] = useState<(() => Promise<any>)>(() => renderDataApiRequest)

  const [matchingResultCode, setMatchingResultCode] = useState<string | undefined>()
  const [locale, setLocale] = useState('zh_cn')
  const [theme, setTheme] = useState('light')

  const captchaRef = useRef<any>(null)
  useEffect(() => {
    setRenderDataApi(() => renderDataApiRequest)
  }, [type])
  const handleMatchingData = async (data: any) => {
    console.log('matching-data', data)
    const res = await axios.post(`${checkUrl}`, data)
    setMatchingResultCode(res.data.code)
  }

  const handleRenderSuccess = (val: boolean) => {
    console.log('render-success', val)
  }

  const changeLang = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setLocale(event.target.value)
  }

  const changeTheme = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setTheme(event.target.value)
  }

  const changeType = (event: React.ChangeEvent<HTMLSelectElement>) => {
    console.log('changeType called with value:', event.target.value); // 添加调试日志
    setType(event.target.value);
    setRenderDataApi(renderDataApiRequest)
    captchaRef.current?.refresh();
  }

  return (
      <div id="app">
        <div className="config-select">
          <label>
            类型：
            <select onChange={changeType} value={type}>
              <option value="SLIDER">滑块</option>
              <option value="ROTATE">旋转</option>
              <option value="CONCAT">拼接</option>
              <option value="WORD_IMAGE_CLICK">文字选点</option>
            </select>
          </label>
          <label>
            语言：
            <select onChange={changeLang} value={locale}>
              <option value="zh_cn">简体中文</option>
              <option value="zh_tw">繁体中文</option>
              <option value="en">English</option>
              <option value="ja">日語</option>
              <option value="ko">한국어</option>
            </select>
          </label>
          <label>
            主题：
            <select onChange={changeTheme} value={theme}>
              <option value="light">light</option>
              <option value="dark">dark</option>
            </select>
          </label>
        </div>

        <KiteConfigProvider locale={locale} theme={theme}>
          <KiteCaptcha
              ref={captchaRef}
              value={matchingResultCode}
              onValueChange={setMatchingResultCode}
              renderDataApi={renderDataApi}
              scale={1}
              showClose={true}
              backgroundImage="https://picsum.photos/1920/1080"
              onMatchingData={handleMatchingData}
              onRenderSuccess={handleRenderSuccess}
          />
        </KiteConfigProvider>
      </div>
  )
}

export default App
